
window.wx2bankVue= new Vue({
    el: '#el_of_wx2bank',
    template: `
        <div class="wx2bank_wrap" style="display:none">
            <div>
                <div class="tit" style="margin-top:20px;margin-bottom:20px">微信向银行卡或手机号转账</div>
                <ul class="text-muted col-md-8">
                    <li>
                        <div @click="togStep(0)" style="cursor:pointer">打开微信APP，点击右上角“收付款”按钮
                            <span v-show="!step[0]">（点击看图）<button class="btn btn-link svg-wrap"><img class="svg" src="./Wx2Bank/pic.svg"></button></span>
                        </div>
                        <img v-show="step[0]" class="shadow" src="./Wx2Bank/step1.jpg">
                    </li>
                    <li>
                        <div @click="togStep(1)" style="cursor:pointer">选择下方“向银行卡或手机号转账”
                            <button v-show="!step[1]" class="btn btn-link svg-wrap"><img class="svg" src="./Wx2Bank/pic.svg"></button>
                        </div>
                        <img v-show="step[1]" class="shadow" src="./Wx2Bank/step2.jpg"></li>
                    <li>
                        <div @click="togStep(2)" style="cursor:pointer">{{wx2phone? '选择“向手机号转账”，之后复制下方资讯到对应栏位': '将下方资讯拷贝到对应栏位'}}
                            <button v-show="!step[2]" class="btn btn-link svg-wrap"><img class="svg" src="./Wx2Bank/pic.svg"></button>
                        </div>
                        <img v-show="step[2]" class="shadow" :src="'./Wx2Bank/step'+(wx2phone? 4: 3)+'.jpg'"></li>
                    <li v-if="wx2phone">收款人: <span class="">{{payment.pay.name}}</span> </li>
                    <li v-if="!wx2phone">收款银行: <span class="">{{payment.pay.bank_name}}</span> </li>
                    <li class="fix-copy-button">{{wx2phone? '手机号：': '卡号：'}}<span class="text-dark">{{payment.pay.card_id}}</span><a href="##" class="copy Copy float-none">复制</a></li>
                    <li v-show="!wx2phone" class="fix-copy-button">收款人: <span class="text-dark">{{payment.pay.name}}</span><a href="##" class="copy Copy float-none">复制</a></li>
                    <li>将下方金额拷贝到对应栏位</li>
                    <li class="fix-copy-button">金额: <span class="text-danger">￥</span><span class="text-danger f-16">{{payment.order.source}}</span><a href="##" class="copy Copy float-none">复制</a></li>
                    <div>&nbsp;</div>
                    <div><p style="color: red;font-size: 16px">请拷贝转账金额 {{payment.order.source}}，为了存款更快被区分，将不使用整数，虽然实际支付少了，但不影响到账金额。</p></div>
                </ul>
            </div>
            <div class="orderDetailBtn col-md-8" style="margin-bottom: 26px;margin-top:26px">
                <a href="##" class="copyBtn " data-toggle="modal" data-target=".bs-example-modal-sm">我已完成汇款</a>
                <a href="##" class="copyBtn canalBtn canalOrder" data-toggle="modal" data-target=".bs-example-modal-sm1">取消订单[20:00]</a>
            </div>
        </div>
    `,
    data(){return{
        payment: {order:{}, pay:{}},
        step:[false, false, false],
        wx2phone: false,
    }},
    methods:{
        togStep(i){
            this.step[i]= !this.step[i]
            this.$forceUpdate()
        },
        fresh(){
            $('.wx2bank_wrap li')
                .css('list-style-type', 'disc')
                .css('padding-bottom', '0.8em')
            $('.wx2bank_wrap img')
                .css('margin', '10px 0 16px 0')
                .css('max-width', '100%')
            $('.wx2bank_wrap .svg')
                .css('width', '100%')
                .css('height', '100%')
                .css('position', 'absolute')
                .css('left', '-0.8em')
                .css('top', '-1.2em')
            $('.wx2bank_wrap .svg-wrap')
                .css('width', '2.6em')
                .css('height', '1.6em')
                .css('padding', '0')
                .css('position', 'relative')


        }
    },
    watch:{
        payment(){
            this.fresh();
        }
    }
})
